/* 课程分类卡片样式 */
.categoryCard {
  @apply transition-all duration-200 hover:shadow-md;
  border-radius: 8px;
  margin-bottom: 16px;
}

.categoryCard.selected {
  @apply border-blue-500 shadow-md;
  border-width: 2px;
}

.cardTitle {
  @apply flex items-center gap-2;
}

.checkbox {
  @apply flex-shrink-0;
}

.colorIndicator {
  @apply w-4 h-4 rounded-full flex-shrink-0;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
}

.titleIcon {
  @apply text-orange-500 flex-shrink-0;
}

.categoryName {
  @apply font-medium text-gray-900 flex-1 truncate;
  font-size: 14px;
}

.cardContent {
  @apply space-y-2;
}

.infoRow {
  @apply flex items-center gap-1;
  font-size: 13px;
}

.label {
  @apply text-gray-600 flex-shrink-0;
  min-width: 60px;
}

.value {
  @apply text-gray-900 flex-1;
}

.courseIcon {
  @apply text-blue-500 flex-shrink-0;
}

.courseBadge {
  @apply flex-1;
}

.courseBadge :global(.ant-badge-count) {
  @apply text-white font-medium;
}

.descriptionRow {
  @apply flex flex-col gap-1 pt-2 border-t border-gray-100;
}

.description {
  @apply text-gray-600 text-xs leading-relaxed;
  word-break: break-all;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .categoryCard {
    margin-bottom: 12px;
  }
  
  .cardTitle {
    @apply flex-wrap;
  }
  
  .categoryName {
    font-size: 13px;
  }
  
  .infoRow {
    font-size: 12px;
  }
  
  .label {
    min-width: 50px;
  }
}

/* 暗色主题支持 */
@media (prefers-color-scheme: dark) {
  .categoryCard {
    @apply bg-gray-800 border-gray-700;
  }
  
  .categoryName {
    @apply text-gray-100;
  }
  
  .value {
    @apply text-gray-200;
  }
  
  .label {
    @apply text-gray-400;
  }
  
  .description {
    @apply text-gray-400;
  }
  
  .descriptionRow {
    @apply border-gray-700;
  }
  
  .colorIndicator {
    border-color: #374151;
  }
}